<template>
    <div>
        <h2>添加</h2>
        <div>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <!-- 排序 -->
                <el-form-item label="排序">
                    <el-input v-model="ruleForm.name" style="width: 300px;" />
                </el-form-item>
                <!-- 选择父级部门 -->
                <el-form-item label="选择父级部门">
                    <el-cascader :options="options" :props="props" v-model="ruleForm.parent_id" clearable
                        placeholder="请选择" style="width: 300px;" />
                </el-form-item>
                <!-- 部门名称 -->
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入部门名称" style="width: 300px;" />
                </el-form-item>
                <!-- 负责人名称 -->
                <el-form-item label="负责人名称">
                    <el-select v-model="ruleForm.user" placeholder="请选择负责人名称" style="width: 300px;">
                        <el-option v-for="(item, index) in userData" :key="index" :label="item.admin_name"
                            :value="item.admin_id" />
                    </el-select>
                </el-form-item>
                <!-- 负责人手机号 -->
                <el-form-item label="负责人手机号" prop="user_mobile">
                    <el-input v-model="ruleForm.user_mobile" placeholder="请输入负责人手机号" style="width: 300px;" />
                </el-form-item>
                <!-- openid -->
                <el-form-item label="openid" prop="openid">
                    <el-input v-model="ruleForm.openid" placeholder="请输入openid" style="width: 300px;" />
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, ref, watch, watchEffect, } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import http from "../../api/line/line"



const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm: any = reactive({
    name: "",
    parent_id: null, //父级部门 （做成级联框选择）
    user: "",
    user_mobile: "",
    openid: null
})

// 负责人名称
const userData: any = ref([])
const getdepartmentTreelist = async () => {
    const res: any = await http.adminList({})
    console.log(res);
    if (res.code == "00000") {
        userData.value = res.data
        console.log(1111, userData.value);
    }

}
// 级联框
let options = ref([])
// const options = [
//     {
//         value: 'guide',
//         label: 'Guide',
//         children: [
//             {
//                 value: 'disciplines',
//                 label: 'Disciplines',
//                 children: [
//                     {
//                         value: 'consistency',
//                         label: 'Consistency',
//                     },
//                     {
//                         value: 'feedback',
//                         label: 'Feedback',
//                     },
//                     {
//                         value: 'efficiency',
//                         label: 'Efficiency',
//                     },
//                     {
//                         value: 'controllability',
//                         label: 'Controllability',
//                     },
//                 ],
//             },
//             {
//                 value: 'navigation',
//                 label: 'Navigation',
//                 children: [
//                     {
//                         value: 'side nav',
//                         label: 'Side Navigation',
//                     },
//                     {
//                         value: 'top nav',
//                         label: 'Top Navigation',
//                     },
//                 ],
//             },
//         ],
//     },
//     {
//         value: 'component',
//         label: 'Component',
//         children: [
//             {
//                 value: 'basic',
//                 label: 'Basic',
//                 children: [
//                     {
//                         value: 'layout',
//                         label: 'Layout',
//                     },
//                     {
//                         value: 'color',
//                         label: 'Color',
//                     },
//                     {
//                         value: 'typography',
//                         label: 'Typography',
//                     },
//                     {
//                         value: 'icon',
//                         label: 'Icon',
//                     },
//                     {
//                         value: 'button',
//                         label: 'Button',
//                     },
//                 ],
//             },
//             {
//                 value: 'form',
//                 label: 'Form',
//                 children: [
//                     {
//                         value: 'radio',
//                         label: 'Radio',
//                     },
//                     {
//                         value: 'checkbox',
//                         label: 'Checkbox',
//                     },
//                     {
//                         value: 'input',
//                         label: 'Input',
//                     },
//                     {
//                         value: 'input-number',
//                         label: 'InputNumber',
//                     },
//                     {
//                         value: 'select',
//                         label: 'Select',
//                     },
//                     {
//                         value: 'cascader',
//                         label: 'Cascader',
//                     },
//                     {
//                         value: 'switch',
//                         label: 'Switch',
//                     },
//                     {
//                         value: 'slider',
//                         label: 'Slider',
//                     },
//                     {
//                         value: 'time-picker',
//                         label: 'TimePicker',
//                     },
//                     {
//                         value: 'date-picker',
//                         label: 'DatePicker',
//                     },
//                     {
//                         value: 'datetime-picker',
//                         label: 'DateTimePicker',
//                     },
//                     {
//                         value: 'upload',
//                         label: 'Upload',
//                     },
//                     {
//                         value: 'rate',
//                         label: 'Rate',
//                     },
//                     {
//                         value: 'form',
//                         label: 'Form',
//                     },
//                 ],
//             },
//             {
//                 value: 'data',
//                 label: 'Data',
//                 children: [
//                     {
//                         value: 'table',
//                         label: 'Table',
//                     },
//                     {
//                         value: 'tag',
//                         label: 'Tag',
//                     },
//                     {
//                         value: 'progress',
//                         label: 'Progress',
//                     },
//                     {
//                         value: 'tree',
//                         label: 'Tree',
//                     },
//                     {
//                         value: 'pagination',
//                         label: 'Pagination',
//                     },
//                     {
//                         value: 'badge',
//                         label: 'Badge',
//                     },
//                 ],
//             },
//             {
//                 value: 'notice',
//                 label: 'Notice',
//                 children: [
//                     {
//                         value: 'alert',
//                         label: 'Alert',
//                     },
//                     {
//                         value: 'loading',
//                         label: 'Loading',
//                     },
//                     {
//                         value: 'message',
//                         label: 'Message',
//                     },
//                     {
//                         value: 'message-box',
//                         label: 'MessageBox',
//                     },
//                     {
//                         value: 'notification',
//                         label: 'Notification',
//                     },
//                 ],
//             },
//             {
//                 value: 'navigation',
//                 label: 'Navigation',
//                 children: [
//                     {
//                         value: 'menu',
//                         label: 'Menu',
//                     },
//                     {
//                         value: 'tabs',
//                         label: 'Tabs',
//                     },
//                     {
//                         value: 'breadcrumb',
//                         label: 'Breadcrumb',
//                     },
//                     {
//                         value: 'dropdown',
//                         label: 'Dropdown',
//                     },
//                     {
//                         value: 'steps',
//                         label: 'Steps',
//                     },
//                 ],
//             },
//             {
//                 value: 'others',
//                 label: 'Others',
//                 children: [
//                     {
//                         value: 'dialog',
//                         label: 'Dialog',
//                     },
//                     {
//                         value: 'tooltip',
//                         label: 'Tooltip',
//                     },
//                     {
//                         value: 'popover',
//                         label: 'Popover',
//                     },
//                     {
//                         value: 'card',
//                         label: 'Card',
//                     },
//                     {
//                         value: 'carousel',
//                         label: 'Carousel',
//                     },
//                     {
//                         value: 'collapse',
//                         label: 'Collapse',
//                     },
//                 ],
//             },
//         ],
//     },
//     {
//         value: 'resource',
//         label: 'Resource',
//         children: [
//             {
//                 value: 'axure',
//                 label: 'Axure Components',
//             },
//             {
//                 value: 'sketch',
//                 label: 'Sketch Templates',
//             },
//             {
//                 value: 'docs',
//                 label: 'Design Documentation',
//             },
//         ],
//     },
// ]
// 获取级联框里面的值
const getdepartmentList = async () => {
    const res: any = await http.departmentList({})
    console.log(res);
    if (res.code == "00000") {
        options.value = res.data
        console.log(options.value);

    }

}
let props = {
    value: 'id',
    label: 'name',
    children: 'son'
}
// 非空验证
const rules = reactive({
    name: [
        { required: true, message: '请输入部门名称', trigger: 'blur' },
        // { min: 1, max: 10, message: '请输入正确的部门名称', trigger: 'blur' },
    ],
    user: [
        { required: true, message: '请选择负责人名称', trigger: 'blur' },
        // { min: 1, max: 10, message: '请选择正确的负责人名称', trigger: 'blur' },
    ],
    user_mobile: [
        { required: true, message: '请输入负责人手机号', trigger: 'blur' },
        // { min: 11, max: 11, message: '请输入正确的负责人手机号', trigger: 'blur' },
    ],
    openid: [
        { required: true, message: '请输入openid', trigger: 'blur' },
        // { min: 1, max: 5, message: '请输入正确的openid', trigger: 'blur' },
    ]
})
// 确定按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log(ruleForm.parent_id)
            const res: any = await http.departmentAdd({
                name: ruleForm.name,
                parent_id: ruleForm.parent_id, //父级部门 （做成级联框选择）
                user: ruleForm.user,
                user_mobile: ruleForm.user_mobile,
                openid: ruleForm.openid
            })
            console.log("add", res);

        } else {
            console.log('error submit!', fields)
        }
    })
}
// 取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    // 级联框
    getdepartmentList()
    // 负责人名称
    getdepartmentTreelist()
})

</script>

<style scoped lang='less'>
/* @import url(); 引入css类 */
</style>